<template>
	<view class="cus-header-container">
		<!-- <image src="/static/images/ic_header_bg.png"></image> -->
		<view class="header-content" :style="{paddingTop: `${scrollerHeight}`}">
			<view class="back_v" v-if="!showBack">
			</view>
			<view class="back_v" v-if="showBack" @click="backClick">
				<image src="/static/ic_back_icon.png"></image>
				<!-- <u-icon name="arrow-left" color="#000000" size="24"></u-icon> -->
			</view>
			<text class="title_t" :style="{color:colorText}">{{titleContent}}</text>
			<view class="back_v">
			</view>
		</view>
	</view>
</template>

<script setup>
	const props = defineProps({
		showBack: {
			type: Boolean,
			required: true,
			default: false
		},
		titleContent: {
			type: String,
			required: true,
			default: '首页'
		},
		colorText:{
			type: String,
			required: true,
			default: '#333333'
		},
		// 新增：是否使用组件内的默认返回（navigateBack），默认启用
		useDefaultBack: {
			type: Boolean,
			default: true
		}
	});

	import {
		onLoad,
		onShow,
		
	} from '@dcloudio/uni-app';
	import {
		ref,
		onMounted
	} from 'vue';
	const scrollerHeight = ref('');
	const emit = defineEmits(['back']);

	const backClick = () => {
		// 先抛出事件，供页面自定义处理
		emit('back');
		// 如果未关闭默认返回，则执行 navigateBack
		if (props.useDefaultBack) {
			uni.navigateBack({
				delta: 1
			})
		}
	}
	//获取状态栏高度
	onShow(()=>{
		
	})
	//获取状态栏高度
	const getBarHeight = () => {
		uni.getSystemInfo({
			success: function(res) {
				console.log(res,'sji')
				scrollerHeight.value = res.statusBarHeight + 'px'
			}
		});
	}
	
	onMounted(() => {
		getBarHeight()
		// scrollerHeight.value = uni.getStorageSync('scrollerHeight');
	})
</script>

<style scoped lang="scss">
	.cus-header-container {
		width: 750rpx;
		// height: 594rpx;
		position: fixed;
		top: 0;
		left: 0;
		display: flex;
		z-index: 2;
	}

	.cus-header-container>image:nth-child(1) {
		width: 100%;
		height: 100%;
		position: absolute;
	}

	.header-content {
		width: 100%;
		height: 80rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: relative;
	}

	.title_t {
		color: #333333;
		font-size: 36rpx;
		font-weight: 700;
		margin-left: 30rpx;
	}

	.back_v {
		width: 46rpx;
		height: 46rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-left: 20rpx;
	}

	.back_v image {
		width: 46rpx;
		height: 46rpx;
	}
</style>